<template>
  <div id="app">
    <div class="search-bar">
      <input type="text" placeholder="请输入关键词进行搜索" />
      <button>搜索</button>
    </div>
    <table>
      <thead>
      <tr>
        <th>商品名称/编号</th>
        <th>价格</th>
        <th>上架状态</th>
        <th>库存数量</th>
        <th>选择/审核状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.status }}</td>
        <td>{{ item.stock }}</td>
        <td>{{ item.selection }}</td>
        <td>
          <button @click="viewDetails(item)">查看详情</button>
          <button @click="editItem(item)">编辑</button>
          <button @click="deleteItem(item)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="pagination">
      <a href="#">&laquo;</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">&raquo;</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品1', price: '100', status: '已上架', stock: '50', selection: '推荐' },
        { name: '商品2', price: '200', status: '已上架', stock: '30', selection: '未审核' },
        // ...其他商品数据
      ],
    };
  },
  methods: {
    viewDetails(item) {
      console.log('查看商品详情：', item);
    },
    editItem(item) {
      console.log('编辑商品：', item);
    },
    deleteItem(item) {
      console.log('删除商品：', item);
    },
  },
};
</script>

<style scoped>
#app {
  width: 80%;
  margin: 0 auto;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: #333;
}
</style>
